<template>
  <div class="page">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">

            <div class="layui-card-body cardbody">
              <div class="layui-form" lay-filter="">

                <div class="layui-form-item">
                      <label class="layui-form-label">门店名称</label>
                      <div class="layui-input-inline">
                        <select name="shopId" lay-filter="shopId">
                          <option :value="items.id+','+items.name" v-for="(items,indexs) in shoplist" :key="indexs">{{items.name}}</option>
                        </select>
                      </div>
                    </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">AppID</label>
                    <div class="layui-input-inline">
                      <input type="text" name="appId" placeholder="请输入ID" autocomplete="off" class="layui-input"
                        v-model="itemData.appId">
                    </div>
                    <span class="notes">开放平台AppI,公众号AppI,小程序AppID;例如小程序AppID:wxbf461a18c584e8b7</span>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">秘钥</label>
                    <div class="layui-input-inline">
                      <input type="text" name="appSecret" placeholder="请输入秘钥" autocomplete="off" class="layui-input"
                        v-model="itemData.appSecret">
                    </div>
                    <span class="notes">开放平台应用密钥,公众号应用密钥,小程序应用密钥</span>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">api安全设置</label>
                    <div class="layui-input-inline">
                      <input type="text" name="apiKey"  autocomplete="off" class="layui-input" v-model="itemData.apiKey">
                    </div>
                    <span class="notes">开放平台申请应用对应商户平台-api安全进行设置</span>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">mchID</label>
                    <div class="layui-input-inline">
                      <input type="text" name="mchId" placeholder="请输入ID" autocomplete="off" class="layui-input"
                        v-model="itemData.mchId">
                    </div>
                    <span class="notes">微信对应的商户id</span>
                  </div>
                </div>

                

                <div class="layui-form-item">
                  <label class="layui-form-label">渠道</label>
                  <div class="layui-input-inline">
                    <select name="channelId" lay-filter="channelId" v-model="itemData.channelId">
                      <option value="">请选择</option>
                      <option value="1">官方</option>
                    </select>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">商户类型</label>
                  <div class="layui-input-inline">
                    <select name="merchantsType" lay-filter="merchantsType" v-model="itemData.merchantsType">
                      <option value="">请选择</option>
                      <option value="ORDINARY_BUSINESS">普通商户</option>
                      <option value="SERVICE">服务商</option>
                      <option value="SPECIALLYCHILD">特约商户</option>
                    </select>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">微信应用类型</label>
                  <div class="layui-input-inline">
                    <select name="weChatType" lay-filter="weChatType" v-model="itemData.weChatType">
                      <option value="">请选择</option>
                      <option value="1">微信app</option>
                      <option value="2">微信公众号</option>
                      <option value="3">小程序</option>
                    </select>
                  </div>
                </div>

                 <div class="layui-form-item">
                      <label class="layui-form-label">域名配置</label>
                      <div class="layui-input-inline">
                        <select name="application" lay-filter="application" v-model="itemData.application.id">
                          <option :value="item.id" v-for="(item,index) in applist" :key="index">{{item.name}}</option>
                        </select>
                      </div>
                    </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">激活状态</label>
                  <div class="layui-input-inline">
                    <select name="status" lay-filter="status" v-model="itemData.status">
                      <option value="">请选择</option>
                      <option value="ENABLE">激活</option>
                      <option value="DISABLE">禁用</option>
                    </select>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-normal" lay-submit @click="sure">确认</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'shopsetem',
  data () {
    return {
      id: "",
      dealerId:localStorage.getItem("dealerId"),
      itemData: {
        shopId:'',
        shopName:'',
        appId: '',// appID
        appSecret: '',// 秘钥
        apiKey: '',
        mchId: '',
        channelId: '',
        merchantsType: '',
        weChatType: '', 
        application: {
            id:"",
            name:"",
            appId:"",
            callBackDomain :"",
            note:"",
        }, 
        status: '', 
      },
      shoplist: [],
      applist:[]
    }
  },
  mounted () {
    var _this = this;
    window.getdates = this.getdates;
    this.getapptype();
    this.getshop(); //门店
  },
  methods: {
    getdates: function (data) {
      var _this= this;
      _this.id = data.id
      var url = "/pay/bapi/v1.9/wechat-infor/" + data.id;
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
          _this.itemData = ret.data;
      });
    },
    getshop: function () {
      var _this = this;
      var url = "/shop/papi/v1.9/shops?dealerId.equals=" + _this.dealerId + '&page=0&size=100';
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        _this.shoplist = ret.data.list;
        _this.itemData.shopId = ret.data.list[0].id;
        _this.itemData.shopName = ret.data.list[0].name;
      });
    },
     getapptype: function () {
      var _this = this;
      var url = "/pay/bapi/v1.9/application";
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        _this.applist = ret.data;
      });
    },
    sure: function () {
      var _this = this;
      var tid = "POST";
      var dates = this.itemData;
      if (this.id) {
        dates.id = this.id;
        tid = "PUT";
      }
      var url = "/pay/bapi/v1.9/wechat-infor";
      ajaxRequest(url, tid, "json", dates, function (ret, err) {
        layer.msg("操作成功");
        setTimeout(function () {
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
          parent.location.reload();
        }, 1000);
      });
    },
  },
  updated: function () {
    var _this = this;
    layui.use('form', function () {
      var form = layui.form;
      form.render();
      form.on("select(shopId)", function(data) {
        //门店
        var arr = data.value.split(',')
         _this.itemData.shopId = arr[0]
         _this.itemData.shopName = arr[1]
      });
      form.on("select(channelId)", function (data) {
        _this.itemData.channelId = data.value;
      });
      form.on("select(merchantsType)", function (data) {
        _this.itemData.merchantsType = data.value;
      });
      form.on("select(weChatType)", function (data) {
        _this.itemData.weChatType = data.value;
      });
      form.on("select(application)", function (data) {
        _this.itemData.application.id = data.value;
      });
      form.on("select(status)", function (data) {
        _this.itemData.status = data.value;
      });
    });

  },
}
</script>
<style scoped>
.notes {
  color: #999;
}
.layui-form-label {
  width: 120px;
  font-size: 15px;
}
.layui-input-block {
  margin-left: 150px;
}
</style>